import React , {Component}from 'react';
import { Modal, Button } from 'antd';
import InputBox from '../../common/InputBox.js'
import Confirm from '../../common/Confirm'
/*系统后台>用户管理>用户列表>新建用户*/

export default class Createuser extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            visible: false,
            phoneHint:'',
            nameHint:'',
            passwordHint:''
        }
        this.Style={};
    }

    componentWillMount() {
        this.Style.createuserview={
            textAlign:"center",
            display:"block",
            border:"3px solid green"
        }
        this.Style.createuserview.width = 400;
        this.Style.createuserview.height = 200;
        this.Style.createuserview.fontSize = 30;

        this.Style.createuserview={
            width:"634px",
            height:"44px",
            paddingLeft:"18px",
            lineHeight:"44px",
            display:"block",
            background:"#f2f2f2",
            marginBottom:49
        }
    }

    state = { visible: false }
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleOk = (e) => {
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }

    bluron(type){
        switch (type){
            case 'phone':
                let re_telephone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                this.userphone = this.refs.phone.state.text;
                if(this.userphone == ""){
                    this.setState({
                        phoneHint:"手机号不能为空"
                    })
                }else if(!re_telephone.test(this.userphone)){
                    this.setState({
                        phoneHint:"手机号码格式不对"
                    })
                }else{
                    this.setState({
                        phoneHint:""
                    })
                    this.right = true;
                }
                return;
            case 'name':
                this.username = this.refs.name.state.text;
                if(this.username == ""){
                    this.setState({
                        nameHint:"姓名不能为空"
                    })
                }else{
                    this.setState({
                        nameHint:""
                    })
                    this.right1 = true;
                }
                return;
            case 'password':
                this.userpassword = this.refs.password.state.text;
                let reg = /^\d{6}$/;
                if(this.userpassword == ''){
                    this.setState({
                        passwordHint:"密码不能为空"
                    })
                }else if(!reg.test(this.userpassword)){
                    this.setState({
                        passwordHint:"密码不符合格式"
                    })
                    this.right2 = true;
                }
                return;
        }
    }
    createuser(){
        this.right = false;
        this.right1 = false;
        this.right2 = false;
        let phone = this.refs.phone.state.text;
        let name = this.refs.name.state.text;
        let password = this.refs.password.state.text;
        let reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        //判断电话
        if(phone == ''){
            alert('提交失败')
            return;
        }else if(!reg.test(phone)){
            alert('提交失败')
            return;
        }else{
            this.right = true;
        }
        //判断姓名
        if(name == ''){
            alert('提交失败')
            return;
        }else{
            this.right1 = true;
        }
        //判断密码
        if(password == ''){
            alert('提交失败')
            return;
        }else if(!/^\d{6}$/.test(password)){
            alert('提交失败')
            return;
        }else{
            this.right2 = true;
        }
        if(this.right && this.right1 && this.right2){
            this.props.createUser(phone,name,password)
            alert('提交成功')
            this.refs.phone.state.text = ""
        }
    }
    render(){
        return (
            <div>
                <Button  type="primary" onClick={this.showModal} >部门</Button>
                <Modal visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} style={{width:"634px",height:"240px",display:"block"}} title={"创建用户"}>
                    <InputBox defaultvalute="请输入手机号" ref={'phone'} titletext="手机号" space="12px" style={{width:338,height:30,borderColor:"#d7d7d7",color:"#999",marginTop:"20px",paddingRight:123}} bluron={this.bluron.bind(this,'phone')}/>
                    <span style={{display:'block',height:'20px',paddingLeft:'105px',paddingTop:'10px',color:'red'}}>{this.state.phoneHint}</span>
                    <InputBox defaultvalute="请输入姓名" ref={'name'} titletext="姓名" space="12px" style={{width:338,height:30,borderColor:"#d7d7d7",color:"#999",marginTop:"20px",paddingRight:123}} bluron={this.bluron.bind(this,'name')}/>
                    <span style={{display:'block',height:'20px',paddingLeft:'105px',paddingTop:'10px',color:'red'}}>{this.state.nameHint}</span>
                    <InputBox type="password" ref={'password'} defaultvalute="请输入6位数字密码" titletext="密码" space="12px" style={{width:338,height:30,borderColor:"#d7d7d7",color:"#999",marginTop:"20px",paddingRight:123}} bluron={this.bluron.bind(this,'password')}/>
                    <span style={{display:'block',height:'20px',paddingLeft:'105px',paddingTop:'10px',color:'red'}}>{this.state.passwordHint}</span>
                    <Confirm tcontext="创建用户" style={{width:130,height:30,display:"block",color:"#fff",fontSize:"16px",marginTop:60,marginLeft:220}} touch={this.createuser.bind(this)}/>
                    <span style={{position:"absolute",left:470,top:6}}>(用作登陆账号)</span>
                </Modal>
            </div>
        )
    }
}





